<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide('formValidate')" :mask-closable="false" width="950">

            <Row>
                <Col span="12">
                    <Form ref="formValidate" :model="params" label-position="top">
                        <FormItem label="订单编号：" prop="orderCode">
                            <Input maxlength="128" v-model.trim="params.orderCode"></Input>
                        </FormItem>
                        <FormItem label="用户账号：" prop="username">
                            <Input v-model.trim="params.username"></Input>
                        </FormItem>
                        <FormItem label="用户昵称：" prop="nickname">
                            <Input v-model.trim="params.nickname"></Input>
                        </FormItem>
                        <FormItem label="提现金额：" prop="totalAmount">
                            <Input v-model.trim="params.totalAmount"></Input>
                        </FormItem>
                        <FormItem label="实际到账金额：" prop="realAmount">
                            <Input v-model.trim="params.realAmount"></Input>
                        </FormItem>
                        <FormItem label="手续费：" prop="poundage">
                            <Input v-model.trim="params.poundage"></Input>
                        </FormItem>
                        <FormItem label="虚拟币账户：" prop="hbUrl">
                            <Input v-model.trim="params.hbUrl"></Input>
                        </FormItem>
                        <FormItem label="用户备注：" prop="orderTitle">
                            <Input v-model.trim="params.orderTitle" type="textarea"></Input>
                        </FormItem>
                        <FormItem label="审核：" prop="orderState">
                            <RadioGroup v-model="params.orderState" @on-change="orderStateChange">
                                <Radio label="2">通过</Radio>
                                <Radio label="3">不通过</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem label="" prop="remark">
                            <Input v-model.trim="params.remark" :disabled="isDisabled" placeholder="请输入审核理由" type="textarea"></Input>
                        </FormItem>
                    </Form>
                </Col>
                <Col span="12">
                    <div class="j-hb-lay">
                        <div class="j-hb-img">
                            <template v-if="params.hbImg">
                                <img :src="params.hbImg">
                            </template>
                            <template v-else>
                                <Icon type="md-images" size="55" color="#c5c8ce" />
                            </template>
                        </div>
                    </div>
                </Col>
            </Row>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide('formValidate')">取消</Button>
                <Button v-if="type != 1" type="primary" @click="handleSubmit('formValidate')" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "recharge-ope",
        data() {
            return {
                isShowModal: false,
                isDisabled: false,
                loadingBtn: false,
                usernameDis: false,
                title: '查看信息',
                type: 0,
                params: {
                    orderId: '',
                    remark: '',
                    orderState: '2',
                    totalAmount: '',
                    poundage: '',
                    realAmount: '',
                    nickname: '',
                    orderCode: '',
                    orderTitle: '',
                    username: '',
                    hbUrl:'',
                    hbImg:''
                }
            }
        },
        methods: {
            // 点击提交验证
            handleSubmit() {
                if(this.params.orderState == 3){
                    if(!this.params.remark){
                        this.$Message.error('请填写审核不通过原因');
                        return false;
                    }
                }

                this.$Modal.confirm({
                    title: `您确定${this.params.orderState == 2 ?"审核通过": "审核不通过"}？`,
                    onOk: () => {
                        // this.$Message.info('您点击了确定.');
                        this.audit();
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });

            },
            // 显示模态框
            show(type, row) {
                this.isShowModal = true;
                this.type = type;
                /**
                 * type判断
                 * 1.查看 2.新增 3.编辑
                 */
                switch (type) {
                    case 1:
                        this.title = '查看提现';
                        this.findInfo(row);
                        break;
                    case 2:
                        this.title = '新增提现';
                        break;
                    case 3:
                        this.title = '审核提现';
                        this.findInfo(row);
                        break;
                    default:
                        this.$Notice.error({
                            title: '提现管理',
                            desc: '查看，新增，编辑模态框报错',
                            duration: 0
                        });
                        break
                }
            },
            // 查询提现详情
            audit(row) {
                this.$Spin.show();
                this.axios.post('/userWithdraw/audit', this.params).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$Message.success('操作成功');
                        this.$emit('changeData');
                        this.hide();
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看提现详情接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 查询提现详情
            findInfo(row) {
                this.$Spin.show();
                this.axios.post('/userWithdraw/findInfo', {
                    orderId: row.orderId
                }).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.params.totalAmount = res.data.totalAmount;
                        this.params.poundage = res.data.poundage;
                        this.params.realAmount = res.data.realAmount;
                        this.params.orderId = res.data.orderId;
                        this.params.nickname = res.data.nickname;
                        this.params.orderCode = res.data.orderCode;
                        this.params.orderTitle = res.data.orderTitle;
                        this.params.hbUrl = res.data.hbUrl;
                        this.params.hbImg = res.data.hbImg;
                        this.params.username = res.data.username;
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看提现详情接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 审核状态改变
            orderStateChange(e){
                this.params.orderState = e;
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            }
        }
    }
</script>

<style scoped>
    .j-hb-lay{
        padding-left: 10px;
    }
    .j-hb-img{
        height: 642px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: #f8f8f9;
    }
    .j-hb-img img{
        width: 100%;
        height: 100%;
    }
</style>